<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='保存用户',active='user'">
<header th:replace="admin/header::headerFragment(${title},${active})"></header>
<link th:href="@{/admin/plugins/toggles/toggles.css}" rel="stylesheet"/>

<!--<link href="//cdn.bootcss.com/multi-select/0.9.12/css/multi-select.css" rel="stylesheet"/>
<link href="//cdn.bootcss.com/select2/3.4.8/select2.min.css" rel="stylesheet"/>-->
<!--<link th:href="@{/select2/3.4.8/select2.min.css}" rel="stylesheet"/>-->
<link th:href="@{/select2/4.0.4/css/select2.min.css}" rel="stylesheet" />
<style>
    #tags_tagsinput {
        background-color: #fafafa;
        border: 1px solid #eeeeee;
    }

    #tags_addTag input {
        width: 100%;
    }

    #tags_addTag {
        margin-top: -5px;
    }

    .dropzone1 {
        /*min-height: 230px;*/
        /*border: 2px dashed rgba(0, 0, 0, 0.3);*/
        /*background: #fff;
        border-radius: 6px;*/
    }
</style>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="admin/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">
                            <th:block th:if="${null != user}">
                                编辑用户
                            </th:block>
                            <th:block th:unless="${null != user}">
                                发布用户
                            </th:block>
                        </h4>
                    </div>
                    <div class="col-md-6">
                        <div class="panel panel-color panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title">用户信息</h3>
                            </div>
                            <div class="panel-body">
                                <form class="form-horizontal" id="userForm" role="form" novalidate="novalidate">
                                    <input type="hidden" name="uid"
                                           th:value="${user !=null and user.uid!=null}?${user.uid}: ''" id="uid"/>
                                    <input type="hidden" name="activated_1"
                                           th:value="${user!=null and user.activated !=null}?${user.activated}: 1"
                                           id="activated_1"/>

                                    <div class="form-group" style="padding: 0 10px 0 0;">
                                        <label class="col-md-3 control-label">用户名</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="请输入用户名（必须）" name="username"
                                                   required="required"
                                                   aria-required="true"
                                                   th:value="${user!=null and user.username!=null }?${user.username}: ''"/>
                                        </div>
                                    </div>
                                    <div class="form-group" style="padding: 0 10px 0 0;">
                                        <label class="col-md-3 control-label">密码</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="请输入密码（不输入则不修改）" name="password"
                                                   required="required"
                                                   aria-required="true"
                                                   th:value="${user!=null and user.password!=null }?'' : ''"/>
                                        </div>
                                    </div>
                                    <div class="form-group" style="padding: 0 10px 0 0;">
                                        <label class="col-md-3 control-label">邮箱</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="请输入邮箱（必须）" name="email"
                                                   required="required"
                                                   aria-required="true"
                                                   th:value="${user!=null and user.email!=null }?${user.email}: ''"/>
                                        </div>
                                    </div>
                                    <div class="form-group " style="padding: 0 10px 0 0;">
                                        <label class="col-md-3 control-label">登录名</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control col-md-9" placeholder="请输入登录名（必须）" name="screenName"
                                                   required="required"
                                                   aria-required="true"
                                                   th:value="${user!=null and user.screenName!=null }?${user.screenName}: ''"/>
                                        </div>
                                    </div>
                                    <div class="form-group" style="padding: 0 10px 0 0;">
                                        <label class="col-md-3 control-label">用户组</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="请输入用户组（必须）" name="groupName"
                                                   required="required"
                                                   aria-required="true"
                                                   th:value="${user!=null and user.groupName!=null }?${user.groupName}: ''"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">是否激活</label>
                                        <div class="col-md-9">
                                            <!--<div th:class="${user!=null and  user.activated !=null}?'toggle toggle-success allow-'+${user.activated}: 'toggle toggle-success allow-true'"
                                                 onclick="allow_activated(this);"></div>-->
                                            <select id="activated" name="activated" class="form-control">
                                                <option value="1" >是</option>
                                                <option value="0" >否</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="text-right">
                                        <a class="btn btn-default waves-effect waves-light" th:href="@{/admin/users}">返回列表</a>
                                        <button type="button" class="btn btn-primary waves-effect waves-light"
                                                onclick="saveUser();">
                                            保存用户
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div th:replace="admin/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="admin/footer :: footer"></div>

<script th:src="@{/admin/plugins/tagsinput/jquery.tagsinput.min.js}"></script>
<script th:src="@{/admin/plugins/jquery-multi-select/jquery.quicksearch.js}"></script>

<script th:src="@{/admin/plugins/md/js/jquery.scrollto.js}"></script>
<script th:src="@{/admin/plugins/md/js/pagedown.js}"></script>
<script th:src="@{/admin/plugins/md/js/pagedown-extra.js}"></script>
<script th:src="@{/admin/plugins/md/js/diff.js}"></script>
<script th:src="@{/admin/plugins/md/js/md.js}"></script>

<!--<script th:src="@{//cdn.bootcss.com/multi-select/0.9.12/js/jquery.multi-select.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/select2/3.4.8/select2.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/jquery-toggles/2.0.4/toggles.min.js}"></script>-->
<!--<script th:src="@{/multi-select/0.9.12/js/jquery.multi-select.min.js}"></script>-->

<script th:src="@{/jquery-toggles/2.0.4/toggles.min.js}"></script>
<!--<script th:src="@{/select2/3.4.8/select2.min.js}"></script>-->
<script th:src="@{/select2/4.0.4/js/select2.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var tale = new $.tale();
    $(document).ready(function() {
        $("#activated").select2();
        //select回显--这个是笨方法
        //TODO 有更好的办法请记录
        var selected = $("#activated_1").val();
        if(selected!=null && typeof(selected)!="undefined"){
            $("#activated").val(selected).trigger("change");
        }
    });

    /**
     * 保存用户
     * @param status
     */
    function saveUser() {
        if ($('#userForm input[name=username]').val() == '') {
            tale.alertWarn('请输入用户名');
            return;
        }
        if ($('#userForm input[name=email]').val() == '') {
            tale.alertWarn('请输入用户邮箱');
            return;
        }
        if ($('#userForm input[name=screenName]').val() == '') {
            tale.alertWarn('请输入用户登录名');
            return;
        }
        if ($('#userForm input[name=groupName]').val() == '') {
            tale.alertWarn('请输入用户组');
            return;
        }

        var params = $("#userForm").serialize();
        var url = $('#userForm #uid').val() != '' ? '/admin/users/modify' : '/admin/users/save';
        url = getContextPath() + url;
        tale.post({
            url:url,
            data:params,
            success: function (result) {
                if (result && result.success) {
                    tale.alertOk({
                        text:'用户保存成功',
                        then: function () {
                            setTimeout(function () {
                                window.location.href = getContextPath() + '/admin/users';
                            }, 500);
                        }
                    });
                } else {
                    tale.alertError(result.msg || '保存用户失败');
                }
            }
        });
    }

    /*]]>*/
</script>

</body>
</html>